{% extends 'log_reg_base.html' %}
{% load staticfiles %}
{% block title %}
登录
{% endblock %}
{% block base_body %}
 <div class="wrapper">
        <img src={% static "media/registerLogo.png" %} alt="" class="logo">
        <h3>快来登录</h3>

        <form action="" method="POST" role="form">
            {% csrf_token %}
             <div class="form-group">
                <input type="text" class="form-control" value="{{ username }}" id="phone" name="phone" placeholder="请输入名称">
                <label for="name"></label>
            </div>
            <div class="form-group ">
                <div class="input-group">
                    <input type="text" class="form-control" id="verify" name="verify" placeholder="看不清请点击验证码">
                    <span class="input-group-addon" style="display: block;"><img id="change" src="{% url 'user:verify' %}?"></span>
                    <label for="name" >名称</label>
                </div>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="pwd" name="pwd" placeholder="请输入密码">
                <label for="name">名称</label>
            </div>

            <div class="form-group">
                <input type="checkbox" {{ checked }} name="remember" id=""><span>记住用户名</span>
            </div>
            <button type="submit" class="btn btn-lg btn-default btn-block login ">登录</button>


        </form>
        <div class="forget"><a href={% url 'user:find_pwd' %}>忘记密码在这里找回</a></div>
        <a href= {% url 'user: register' %}>注册</a>

    </div>
{% endblock %}
{% block bottom_js %}
    <script>
        var error = '{{ err }}';
        if (error != '')
        {
            alert(error)
        }
        $(function () {
            var mail = false;
            var verify = false;
            var pwd = false;
            var pho = $('#phone');
            var veri = $('#verify');
            var p = $('#pwd');
            var change = $('#change')
            change.click(function(){
                $(this).prop('src' ,$(this).prop('src')+1)
            });



             function CheckPhone() {
                if (pho.val() == '') {
                    pho.next().html('名称不能为空');
                    pho.next().show();
                    phone = true;
                }else{
                    phone = false
                }

            }


            function CheckVerify() {
                if (veri.val() == '') {
                    veri.siblings('label').html('验证码必须输入');
                    veri.siblings('label').show();
                    verify = true;
                } else {

                    verify = false;
                }
            }

            function Checkpwd() {
                var re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
                if (p.val()=='')
                {
                    p.next().html('密码不能为空');
                    p.next().show();
                    pwd = true;
                }
                else if(!re.test(p.val()))
                {
                    p.next().html('密码长度要大于6位，由数字和字母组成');
                    p.next().show();
                    pwd = true;
                }else{
                    pwd = false
                }
            }




            pho.focus(function(){
                $(this).next().html('');
            });

            pho.blur(function(){
                CheckPhone()
            });

            veri.focus(function(){
                $(this).siblings('label').html('');
            });

            veri.blur(function(){
                CheckVerify();
            });

            p.focus(function(){
                $(this).next().html('');
            });

            p.blur(function(){
                Checkpwd();
            });


            $('form').submit(function(){
                CheckPhone();
                CheckVerify();
                Checkpwd();
                if(mail==false&&verify==false&&pwd==false)
                {
                    return true;
                }
                else
                {
                    return false;
                }
            })

        })
    </script>
{% endblock %}
